<template>
	<el-main style="padding:0 20px;">
		<el-form :model="form" :disabled="mode=='show'" ref="dialogForm" label-width="100px" >
			<el-descriptions :column="1" border size="small">
				<el-descriptions-item label="id">{{data.id}}</el-descriptions-item>
				<el-descriptions-item label="发送人">{{data.sendName}}</el-descriptions-item>
				<el-descriptions-item label="接收人">{{data.resName}}</el-descriptions-item>
				<el-descriptions-item label="标题">{{data.title}}</el-descriptions-item>
				<el-descriptions-item label="链接">{{data.link}}</el-descriptions-item>
				<el-descriptions-item label="发送时间">{{data.time}}</el-descriptions-item>
			</el-descriptions>
			<el-collapse v-model="activeNames" style="margin-top: 20px;">
				<el-collapse-item title="内容" name="1">
					<el-alert title="" :type="typeMap[data.type]" :closable="false">{{data.content}}</el-alert>
				</el-collapse-item>
				<!-- <el-collapse-item title="详细" name="2">
					<div class="code">{{data.content}}</div>
				</el-collapse-item> -->
			</el-collapse>
			
		</el-form>
	</el-main>
</template>

<script>
	export default {
		data() {
			return {
				data: {
					id: 0,   //消息id
					type:'',
					content:'',
					resName:'',
					sendName:'',
					title:'',
					link:'',
					if_read: -1,
					time:''
				},
				activeNames: ['1','2'],
				typeMap: {
					'sys': "sys",
					'user': "user",
				},
			}
		},
		mounted(){
		},
		methods: {
			setData(data){
				Object.assign(this.data, data)   //不是直接修改原值，而是复制一份显示
				this.updateReadStatus();
			},
			async updateReadStatus(){
				var res = await this.$API.system.message.markRead.post({ids: this.data.id});
				if (res.code!=200)
					this.$alert(res.message, "提示", {type: 'error'})
			},
		}
	}
</script>

<style scoped>
	.code {background: #848484;padding:15px;color: #fff;font-size: 12px;border-radius: 4px;}
</style>
